Integrating Python for Seamless Visualization in FreeFEM
Yu-Hsun Lee 李昱勳
前瞻研究籌獲中心
國家資通安全研究院
Oct 19, 2023
自我介紹
李昱勳
京都大學博士(情報學)
2022/022022/07 成大數學系博士後研究員
2022/082023/01 資安卓越中心助理研究員
2023/01〜國家資通安全研究院副研究員
PyCon Taiwan 2023 議程組組長
1/26
Integrating Python for Seamless Visualization in FreeFEM
C++ Python 是否搞錯了什麼
Yu-Hsun Lee 李昱勳
前瞻研究籌獲中心
國家資通安全研究院
Oct 19, 2023
2/26
Outline
1. FreeFEM 簡介
2. C++ Python ?!
3. 透過 Plotly 整合 FreeFEM 視覺化
4. Demo
3/26
FreeFEM 簡介
FreeFEM 是什麼?
4/26
FreeFEM 是什麼?
開源有限元分析軟體
主要開發者:Université Pierre et Marie Curie and
Laboratoire Jacques-Louis Lions
特點:簡單語言、平行計算能力
Figure 1: Output of FreeFem++ (Taiwan
shaped mesh and numerical result)
5/26
Example
For a given function f(x, y) = xy on unit disk R
2
, nd a function u(x, y) satisfying :
u(x, y) = f(x, y) in
u(x, y) = 0 on
(1)
The boundary C = is denoted by:
C = {(x, y)|x = cos(t), y = sin(t), 0 t < 2π}
Weak Formulation of Equation(1)
Find u H
1
0
(Ω) s.t
u · v dxdy =
fv dxdy v H
1
0
(Ω) (2)
6/26
Example
Code
Execution
> FreeFem++ poisson.edp
7/26
Results
Figure 2: Built-in Visualization interface of FreeFem
8/26
Results
(a) Figure Window (b) Help Window
Figure 2: Built-in Visualization interface of FreeFem
8/26
2D 網頁視覺化與 FreeFEM
Demo: https://freefem.andylee.tw
9/26
3D 網頁視覺化與 FreeFEM
Demo: https://freefem.andylee.tw
10/26
client-server 架構
FreeFEM
module/server
Browser
Dynamic Loading
HTTP RequestHTTP Response
Module
cpp-httplib: HTTP Library
Web API
(Application Programming Interface)
11/26
client-server 架構
FreeFEM
module/server
Browser
Dynamic Loading
HTTP RequestHTTP Response
Browser
HTML5 Canvas
SVG.js: SVG Library
three.js: 3D Library
11/26
C++ Python ?!
如何把 FreeFEM 的結果呈現在網頁上?
原本的做法
1. C++ 中引入 web server 函式庫
2. 把資料寫成 JSON 格式,暫存在硬碟
3. 刻一個網頁,讀取 JSON 檔案,並且把資料畫出來
12/26
如何把 FreeFEM 的結果呈現在網頁上?
原本的做法
1. C++ 中引入 web server 函式庫
2. 把資料寫成 JSON 格式,暫存在硬碟
3. 刻一個網頁,讀取 JSON 檔案,並且把資料畫出來
畫圖、建 web sever ,這不都是 Python 擅長的嗎?
12/26
Python 有很多畫圖的函式庫
透過 Plotly mesh 資料做成網站只要 3 行!
13/26
我們該如何在 C++ 中使用 Python 函式庫?
14/26
pybind11 是什麼?
可以用 C++ 來寫 Python 的函式庫 (大家都知道 Python 很慢)
Docs: https://pybind11.readthedocs.io/en/stable/basics.html
15/26
pybind11 是什麼?
可以在 C++ 呼叫 Python
Docs: https://pybind11.readthedocs.io/en/stable/advanced/embedding.html
16/26
pybind11 還有什麼特異功能?
可以直接在 C++ 中使用 Numpy 的陣列
Generated by ChatGPT
17/26
透過 Plotly 整合 FreeFEM 視覺化
client-server 架構
FreeFEM
module
Python/server
Browser
Dynamic Loading
pybind11
HTTP Request
HTTP Response
18/26
Using the module in FreeFEM
Figure 4: Comparison of FreeFEM Code
Compatible with FreeFEM v4.x
19/26
Using the data from FreeFEM in Python
pyfem.cpp
myscript.py
20/26
執行結果
Execution
> FreeFem++ poisson.edp
21/26
Face-Vertex Mesh
Source: https://en.wikipedia.org/wiki/Polygon_mesh
22/26
Sample Code
23/26
再執行一次
Execution
> FreeFem++ poisson.edp
24/26
結果呈現
25/26
Demo
業配時間
資安院徵才中
26/26
Q&A
26/26